<template>
  <el-container class="containBox">
    <el-header class="el-header">SAY SOMETHING!</el-header>

    <!--左侧编辑栏-->
    <el-container style="height: 100%;">
      <el-aside width="600px" class="el-aside">
        <el-form label-width="200px" class="editBox" :model="textForm" ref="textForm">
          <el-form-item label="标题" prop="title" style="width: max-content;">
            <el-input v-model="textForm.title"></el-input>
          </el-form-item>

          <el-form-item label="选定时间" required>
            <el-col>
              <el-form-item prop="date">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                  v-model="textForm.date"></el-date-picker>
              </el-form-item>
            </el-col>

          </el-form-item>

          <el-form-item label="内容" prop="desc">
            <el-input type="textarea" v-model="textForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('textForm')">立即创建</el-button>
            <el-button @click="resetForm('textForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-aside>


      <!--显示栏-->
      <el-main class="el-main">



        <div v-for="item in forms" class="MesBox">
          <button class="clearbtn" @click="itemdelete(item.title)">删除</button>
          <div class="title">{{ item.title }}</div>
          <div class="date">{{ item.date }}</div>
          <div class="text">{{ item.desc }}</div>
        </div>




      </el-main>
    </el-container>
  </el-container>
</template>
  
<script>
import axios from "axios"

export default {
  data() {
    return {
      textForm: {
        title: '',
        date: '',
        desc: ''
      },
      forms: [],

    }
  },
  created() {
    let atoken = localStorage.getItem("token");
    axios.get("http://localhost:7001/data", { headers: { token: atoken } }).then((res) => {
      this.forms = res.data.data;

    })
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message('submit success!');
          let newMes = {
            title: this.textForm.title,
            date: this.textForm.date,
            desc: this.textForm.desc
          }
          this.forms.push(newMes);
          let atoken = localStorage.getItem("token");
          axios.post("http://localhost:7001/add", { form: this.textForm }, { headers: { token: atoken } }).then((res) => {
            if (res.data.code === 200) { this.$message('add success!'); }
            else { this.$message('add false!'); }
          })

          this.$refs[formName].resetFields();


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    itemdelete: function (title) {
      let atoken = localStorage.getItem("token");
      axios.post("http://localhost:7001/del", { title: title }, { headers: { token: atoken } }).then((res) => {
        if (res.data.code == 200) { this.$message('已删除！'); this.$router.go(0) }
        else { this.$message('error!') }
      })
    }


  }

}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.containBox {
  height: 100%;
  width: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #606266;
  text-align: center;
  line-height: 60px;
  font-style: italic;
  font-weight: 800;
  font-size: xx-large;
}



.el-aside {
  background-color: #D3DCE6;
  color: #9ce5f4;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;

}

.editBox {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-15%, -50%);
}


.MesBox {
  height: fit-content;
  margin-bottom: 50px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 2px 16px;
}

.MesBox:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.title {
  font-size: x-large;
  font-weight: 900;
}

.date {
  font-size: medium;
  font-family: cursive;
  font-variant-numeric: normal;
}

.text {
  font-size: large;
}

.clearbtn {
  float: right;
  color: white;
  background: #1890FF;
  border: 1px solid rgba(0, 174, 255, 0.397);
  box-shadow: 2px 2px 2px 0 rgba(0, 174, 255, 0.397);
  transition: all 1s;
  transition: all 1s;

}
</style>
  